<template>
	<div class="bg-bg-3 rounded relative text-t-1 p-3">
		<div class="flex items-center">
			<sports-icon :sportId="data.sportId" class="text-t-2" />
			<div class="text-t-1 app-font-bold text-sm mx-1">{{ data.eventName }}</div>
			<betting-market-desc :match="data" :market="market" />
		</div>
		<betting-select :match="data" :market="market" class="mt-2"></betting-select>
	</div>
</template>

<script lang="ts" setup>
import SportsIcon from '../../sports/sports-icon/index.vue'
import { BettingMarketDesc, BettingSelect } from '../../betting'
import { PropType, computed } from 'vue'
import { Match } from '@/types'
const props = defineProps({
	data: {
		type: Object as PropType<Match>,
		required: true
	}
})

const market = computed(() => props.data.markets[0])
</script>
